---
import { Icon } from "astro-icon/components";
import type { Brands as Props } from "~/types";

import Image from "~/components/common/Image.astro";
import Headline from "~/components/ui/Headline.astro";
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
const {
  title = "",
  subtitle = "",
  tagline = "",
  icons = [],
  images = [],
  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render("bg"),
} = Astro.props;
---

<WidgetWrapper
  id={id}
  isDark={isDark}
  containerClass={`max-w-6xl mx-auto ${classes?.container ?? ""}`}
  bg={bg}
>
  <Headline title={title} subtitle={subtitle} tagline={tagline} />

  <div
    class="flex flex-wrap justify-center gap-x-6 sm:gap-x-12 lg:gap-x-24 gap-y-10"
  >
    {
      icons &&
        icons.map((icon) => (
          <Icon
            name={icon}
            class="py-3 lg:py-5 w-12 h-auto mx-auto sm:mx-0 text-gray-500"
          />
        ))
    }
    {
      images &&
        images.map(
          (image, index) =>
            image.src && (
              <div
                class={`flex justify-center items-center max-w-[200px] ${index === 1 ? "max-w-[250px]" : ""}`}
              >
                <Image
                  src={image.src}
                  alt={image.alt || ""}
                  class="object-cover"
                />
              </div>
            ),
        )
    }
  </div>
</WidgetWrapper>
